<template>
  <div class="content regist bg-white">
    <div class="head-top">
      <dc-header :page-to="'/login'" :title="'注册'"></dc-header>
      <div class="pl50 pr50 pt68">
        <inputItem placeholder="请输入姓名" type="text"
                   iconName="icon-register-account"
                   v-model="fullname"
                   :maxLength = "15"
                   v-validate="{ rules: { required: true, max: 15 } }"
                   name="姓名"
        />
        <inputItem class="mt30" placeholder="请输入手机号" type="tel"
                   iconName="icon-login-account"
                   v-model="username"
                   :maxLength = "11"
                   v-validate="{ rules: { required: true, phone: true } }"
                   name="手机号"
        />
        <inputCode class="mt30" placeholder="请输入验证码" type="number"
                   iconName="icon-register-yanzheng"
                   v-model="smsAuthCode"
                   v-validate="{ rules: { required: true ,length: 6} }"
                   name="验证码"
                   :btnlabel="code"
                   :btnaction="_getAuthCode"
                   :disabled="!show"
        />
        <!--<mt-button class="mt50" size="small" type="primary" @click="_getAuthCode">获取验证码</mt-button>-->
        <inputItem class="mt30" placeholder="请输入密码，6-20位数字和字母组合" type="password"
                   iconName="icon-login-password"
                   :maxLength = "20"
                   v-validate="{ rules: { required: true, max: 20, min: 6 } }"
                   v-model="password"
                   name="密码"
        />
      </div>
      <div class="pl50 pr50 mt50">
        <mt-button size="large" type="primary" @click="_regist"
                   :disabled="(!smsAuthCode || !password || !fullname || !username )&& errors.items.length==0 || errors.items.length!=0">
          注册
        </mt-button>
        <div class="mt60 f26">
          已有账户?
          <router-link class="link" to="login"> 现在去登录</router-link>
        </div>
        <div class="bottom-info f26">
          立即注册表示您遵守并同意
          <router-link class="link" to="agreement">《天财商龙用户协议》</router-link>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import inputItem from '@/common/plugins/input/inputItem';
  import inputCode from '@/common/plugins/input/inputCode';
  import comApi from '@/common/api/api';
  import api from '@/common/api/regist';
  import _login from '../login/_login';
  import mintUi from '@/common/mintUi';
  export default {
    data () {
      return {
        username: '',
        fullname: '',
        password: '',
        smsAuthCode: '',
        code: '获取验证码',
        show: true,
        count: 60,
        timer: null
      };
    },
    components: {
      'dc-header': header,
      'inputItem': inputItem,
      'inputCode': inputCode
    },
    methods: {
      getCode () {
        const TIME_COUNT = 60;
        this.code = this.count + 's后重发';
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            this.code = this.count + 's后重发';
          } else {
            this.show = true;
            this.code = '获取验证码';
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      },
      _regist () {
        this.$validator.validateAll().then((result) => {
          if (result) {
            let submitobj = {
              fullname: this.fullname,
              username: this.username,
              password: this.password,
              smsAuthCode: this.smsAuthCode
            };
            api.regist(submitobj)
              .then(res => {
                mintUi.openToast('注册成功');
                _login.login(submitobj, this);
              });
          } else {
            mintUi.openToast(this.errors.items[0].msg);
          }
        });
      },
      _getAuthCode () {
        if (this.username) {
          this.$validator.validate('手机号', this.username).then((result) => {
            if (result) {
              this.getCode();
            }
          });
          let data = {
            username: this.username
          };
          comApi.getAuthCode(data)
            .then(res => {
              console.log(res);
              this.smsAuthCode = res;
            });
        } else {
          mintUi.openToast('请输入手机号');
        }
      }
    }
  };
</script>
<style lang="scss">
  @import "../../assets/css/variable";

  .regist {
    .pt68 {
      padding-top: px2rem(68px);
    }
    .mt60 {
      margin-top: px2rem(60px);
    }
    .bottom-info {
      // position: absolute;
      // bottom: 0;
      // left: 0;
      // right: 0;
      height: px2rem(30px);
      padding-top: px2rem(230px);
      padding-bottom: px2rem(55px);
    }
    a.link {
      color: #7b78f2;
    }
    .f26 {
      font-size: px2rem(26px);
    }

  }
</style>
